<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>投资</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<style type="text/css">
		
			.status{
				padding: 16px 10px 14px;
				background: #FFFFFF;
			}
			.border-bottom{
				border-bottom: 1px solid #DDDDDD;
			}
			input[type=tel].money{
				width: 90%;
				padding:0 0 0 10%;
				text-align: center;
				font-size:26px;
				border: 0;
			}
			::-webkit-input-placeholder { /* WebKit, Blink, Edge */
			    color:    #989898;
			    padding: 5px 0 ;
			    font-size: 22px;
			}
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
			   color:    #989898;
			   padding: 5px 0 ;
			    font-size: 22px;
			}
			::-moz-placeholder { /* Mozilla Firefox 19+ */
			   color:    #989898;
			   padding: 5px 0 ;
			    font-size: 22px;
			}
			:-ms-input-placeholder { /* Internet Explorer 10-11 */
			   color:    #989898;
			   padding: 5px 0 ;
			    font-size: 22px;
			}
			.line_height_40{
				line-height: 40px;
			}
			.balance{
				color: #bdbdbd;
				font-size: 14px;
				display: block;
				text-align: center;
			}
			.box{
				padding: 25px 10px 15px;
				background: #FFFFFF;
			}
			.mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
				top: 22px;
				
			}
			.mui-checkbox.mui-left input[type=checkbox], .mui-radio.mui-left input[type=radio]{
				left: 10px;
			}
			.mui-checkbox.mui-left label, .mui-radio.mui-left label{
				padding-left: 40px;
				line-height: 20px;
			}
			.mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
				font-size: 22px;
			}
			.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before{
				color: #ff5811;
			}
			.mui-checkbox{
				padding: 10px 0;
			}
			button:disabled{
				opacity: 1;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">投资</h1>
		</header>
		<div class="mui-content" id="app">
			<div class="status border-bottom">
				<div class="mui-clearfix">
					<span class="color_1 fl f_16 mb_15">高校团餐-珍轩餐饮1期</span>
					<span class="color_4 fr f_14">筹款中</span>
				</div>
				<span class="color_3 f_14 mui-block">借款金额   <span class="color_1">20万</span></span>
				<span class="color_3 f_14">起投金额   <span class="color_1">100元</span> </span>
			</div>
			<div class="box">
				<span class="mui-clearfix">
					<input type="tel" id="money" onpaste="return false" onkeyup="value=value.replace(/[^\d]/g,'')" class="money fl" value="" placeholder="请输入金额，100元起投"/>
					<span class="fr f_16 line_height_40">元</span>
				</span>
				<span class="balance ">您当前的余额 0元</span>
			</div>
			<div class="mui-input-row mui-checkbox mui-left">
				<label class="color_3 f_14">同意<span class="color_4">《贝贝投出借咨询与服务协议》</span>和<span class="color_4">《风险声明书》</span></label>
				<input name="radio1" type="checkbox" id="agree">
			</div> 
			<div class="mui-content-padded">
				<button class="my-btn btn-grey" disabled="disabled" id="pay">确定投资</button>
				<button class="my-btn btn-orange">余额不足，立即充值</button>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="vue/vue.min.js"></script>
		<script type="text/javascript">
			(function($,doc){
				$.init();
				var flag=false;
				var flag2=false;
				$.plusReady(function(){
					//禁止出现滚动条
					plus.webview.currentWebview().setStyle({
	                    scrollIndicator: 'none'
	             	});
	             	plus.webview.currentWebview().setStyle({
						//点击input时,调整屏幕的大小以便留出软键盘的空间
						softinputMode: "adjustResize"
					});
				});
				
				if($.os.plus){
					
				}else{
					//去掉头部标题栏
					doc.getElementsByClassName("mui-bar-nav")[0].style.display="none";
					doc.getElementById("app").style.paddingTop=0;
				}
				var el={
					money:doc.getElementById("money"),
					agree:doc.getElementById("agree"),
					pay:doc.getElementById("pay")
				}
				function change(isChange){
					if(el.money.value&&el.money.value<100 && isChange){
						$.toast("请输入100以上的金额");
					}
					if(el.money.value > 100 && el.agree.checked){
						flag=true;
					}else{
						flag=false;
					}
					if(flag){
						el.pay.setAttribute("class","my-btn btn-red");
						el.pay.removeAttribute("disabled");
					}else{
						el.pay.setAttribute("class","my-btn btn-grey");
						el.pay.setAttribute("disabled","disabled");
					}
				}
				el.money.oninput = function(){
					change(false)
				};
				el.money.onchange=function(){
					change(true)
				};
				el.agree.onchange=function(){
					change(true)
				};
				el.pay.addEventListener("tap",function(){
					app.openViwe2("pay.html","pay.html",{
		                url: 'https://m.baidu.com/?from=844b&vit=fps'
		            })
				})
			}(mui,document));
		</script>
	</body>

</html>